<template>
  <div>
    <!-- 排片计划 -->
    为
    <span style="color: #3f9dff; font-weight: bold">{{
      roomInfo.cinema_name
    }}</span>
    的
    <span style="color: #3f9dff; font-weight: bold"
      >{{ roomInfo.cinema_room_name }}{{ roomInfo.cinema_room_type }}</span
    >
    添加排片计划
    <el-divider></el-divider>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      style="width: 500px"
    >
      <el-form-item label="选择电影" prop="movie_id">
        <el-select
          ref="selector"
          v-model="form.movie_id"
          placeholder="请选择电影"
          style="width: 100%"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in movies"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="放映日期" prop="showingon_date">
        <el-col :span="11">
          <el-date-picker
            v-model="form.showingon_date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center">-</el-col>
        <el-col :span="11">
          <el-time-picker
            v-model="form.showingon_time"
            placeholder="选择时间"
            style="width: 100%"
            value-format="HH:mm"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="票价" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="立即发布" prop="status">
        <el-switch
          v-model="form.status"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即新增该计划</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      roomInfo: {}, //保存放映厅的基本信息
      form: {
        cinema_id: "",
        cinema_room_id: "",
        movie_id: "",
        showingon_date: "",
        showingon_time: "",
        status: "",
        price: "",
      },
      loading: false, //用于说明当前select是否正在异步加载数据
      movies: [], //保存查询到的电影列表
      rules: {
        movie_id: [
          { required: true, message: "请输入选择名电影", trigger: "blur" },
        ],
        showingon_date: [
          { required: true, message: "请选择放映时间", trigger: "blur" },
        ],
        price: [{ required: true, message: "请选择价格", trigger: "blur" }],
        status: [
          { required: true, message: "请选择是否立即发布", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    submit() {
      this.form.cinema_id = this.roomInfo.cinema_id;
      this.form.cinema_room_id = this.$route.params.roomId;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 发送请求,为当前放映厅新增排片计划
          httpApi.showingonPlanApi.add(this.form).then((res) => {
            console.log("新增排片计划", res);
            if (res.data.code == 200) {
            //  添加成功后消息弹出
              this.$notify({
                title: "成功添加排片计划",
                dangerouslyUseHTMLString: true,
                message: 
                `
                <p>放映厅:<b>${this.roomInfo.cinema_room_name }</b></p>
                <p>电影名称:${this.$refs['selector']._data.selectedLabel}</p>
                <p>上映时间:${this.form.showingon_date}${this.form.showingon_time}</p>
                <p>票价:${this.form.price}</p>
                `,
                type:'success'
              });
               // 新增排片计划成功后重置表单
              this.$refs["form"].resetFields();
            }
          });
        } else {
          console.log("error submit!!");
        }
      });

      console.log(this.form);
    },
    // 异步模糊查询电影信息,更新select选择器
    remoteMethod(query) {
      this.loading = true;
      let params = { name: query, page: 1, pagesize: 100 };
      httpApi.movieApi.queryMovieByName(params).then((res) => {
        this.loading = false;
        console.log(res);
        this.movies = res.data.data.result;
      });
    },
    // 加载放映厅的基本信息
    initRoomData() {
      httpApi.cinemaRoomApi
        .queryById({ id: this.$route.params.roomId })
        .then((res) => {
          console.log(res);
          this.roomInfo = res.data.data;
        });
    },
  },

  mounted() {
    // 加载放映厅的基本信息
    this.initRoomData();
  },
};
</script>

<style lang="scss" scoped>
</style>